<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		
		<div id="app">
			<h1>实现路由的案例</h1>
			
			<!-- 2.定义路由标签
					1. a标签说明：a标签 超链接标签
							href 属性：请求跳转的地址
							<a href="http://www.baidu.com">百度</a>
					2. 路由标签说明
						router-link 解析为a标签
						to 解析之后变成href属性
					
			-->
			<router-link to="/home">主页</router-link>
			
			<!-- 3. 指定路由填充位(占位符)
				需要给组件一个展现的位置，需要提前定义
			 -->
			 <router-view></router-view>
			
		</div>
		
		<!--定义template标签 -->
		<template id="homeTem">
			<div>
				<h1>这里是系统首页</h1>
			</div>
		</template>
		
		<!-- 1. 引入JS 路由需要依赖vue 注意顺序 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			<!--4. 封装路由对象-->
			let HomeCom = {
				template: "#homeTem"
			}
			
			
			let router = new VueRouter({
				// routes 定义请求与组件的映射关系
				routes: [
					{path: "/home", component: HomeCom}
				]
			})
			
			// 5. 实现路由对象的绑定
			const app = new Vue({
				el: "#app",
				// router: router 可以简写
				router
			})
			
		</script>
	</body>
</html>
